<template>
  <div class="y-table">
    <vxe-table
      border
      resizable
      show-overflow
      highlight-hover-row
      highlight-current-row
      highlight-hover-column
      highlight-current-column
      :height="defHeight"
      :tree-config="treeConfig"
      :data="data"
      ref="$tree"
      @cell-click="_cellClickHandler"
      @cell-dblclick="$emit('dblclick', $event)"
    >
      <vxe-table-column v-for="item in columns" :key="item.field" v-bind="item">
      </vxe-table-column>
      <!-- 分页 -->
      <template v-slot:pager>
        <el-pagination
          layout="prev, pager, next"
          small
          :total="50"
        ></el-pagination>
      </template>
    </vxe-table>
  </div>
</template>

<script>
var _this;
export default {
  name: "y-table-tree",
  props: {
    data: Array,
    columns: Array,
    treeConfig: {
      type: Object,
      default: function () {
        return {
          lazy: true,
          children: "children",
          hasChild: "hasChild",
          loadMethod: async ({ row }) => {
            var { data } = await $y.api.get(this.url + row.id)
            row.hasChild = data && data.length > 0
            return data;
          },
        };
      },
    },
    url: String,
  },
  created() {
    _this = this;
    var tableProxy = {};
  },
  mounted() {
    _this.api = _this.$refs.$tree;
    // var pageHeight = _this.$refs.$pager.$el.clientHeight;
  },
  data() {
    return {
      api: {},
      defHeight: "auto",
      allAlign: null,
      defaultExpandKeys: [],
      prevSelectId: null,
    };
  },
  methods: {
    async loadChildrenMethod({ row }) {
      return (await $y.api.get(this.url + row.id)).data;
    },
    _cellClickHandler(e) {
      var { rowid, row, $table } = e;
      if (!this.prevSelectId || this.prevSelectId != rowid) {
        this.prevSelectId = rowid;
        this.$emit("select", { rowid, data: row, api: $table });
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.y-table {
  height: 100%;
  .el-pagination {
  }
}
</style>